<!DOCTYPE html>
<html>

    <head>
        <title>Pivot Demo</title>
        
            <!-- external libs from cdnjs -->
            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>

            <!-- PivotTable.js libs from ../dist -->
            <link rel="stylesheet" type="text/css" href="../dist/pivot.css">
            <script type="text/javascript" src="../dist/pivot.js"></script>
            <script type="text/javascript" src="../dist/c3_renderers.js"></script>
            <script type="text/javascript" src="../dist/export_renderers.js"></script>

        <style>
            body { font-family: Verdana; }
            .c3-line, .c3-focused {stroke-width: 3px !important;}
            .c3-bar {stroke: white !important; stroke-width: 1;}
            .c3 text { font-size: 12px; color: grey;}
            .tick line {stroke: white;}
            .c3-axis path {stroke: grey;}
            .c3-circle { opacity: 1 !important; }
        </style>
        
        <!-- optional: mobile support with jqueryui-touch-punch -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
            
            <!-- for examples only! script to show code to user -->
            <script type="text/javascript" src="show_code.js"></script>
    </head>

    <body>
        <script type="text/javascript">
    // This example loads the "Montreal Weather 2014" dataset
    // from a CSV and shows date handling with derivers and
    // sort overriding. This example also features custom
    // aggregators, C3 Charts and hidden attributes.
    
    $(function () {

        var dateFormat =       $.pivotUtilities.derivers.dateFormat;
        var sortAs =           $.pivotUtilities.sortAs;
        var tpl =              $.pivotUtilities.aggregatorTemplates;

        Papa.parse("montreal_2014.csv", {
            download: true,
            skipEmptyLines: true,
            complete: function(parsed){
                $("#output").pivotUI(parsed.data, {
                    hiddenAttributes: ["Date","Max Temp (C)","Mean Temp (C)",
                        "Min Temp (C)" ,"Total Rain (mm)","Total Snow (cm)"],

                    derivedAttributes: {
                        "month name": dateFormat("Date", "%n", true),
                        "day name":   dateFormat("Date", "%w", true)
                    },

                    rows: ["day name"], 
                    cols: ["month name"],

                    sorters: function(attr) {
                        if(attr == "month name") {
                            return sortAs(["Jan","Feb","Mar","Apr", "May",
                                "Jun","Jul","Aug","Sep","Oct","Nov","Dec"]);
                        }
                        if(attr == "day name") {
                            return sortAs(["Mon","Tue","Wed", "Thu","Fri",
                                "Sat","Sun"]);
                        }
                    },

                    aggregators: {
                        "Mean Temp (Celsius)":  
                            function() { return tpl.average()(["Mean Temp (C)"])},
                        "Max Temp (Celsius)":   
                            function() { return tpl.max()(["Max Temp (C)"]) },
                        "Min Temp (Celsius)":   
                            function() { return tpl.min()(["Min Temp (C)"]) }
                    },

                    renderers: $.extend(
                        $.pivotUtilities.renderers,
                        $.pivotUtilities.c3_renderers,
                        $.pivotUtilities.export_renderers
                        ),

                    rendererName: "Heatmap",
                    
                    rendererOptions: {
                        heatmap: {
                            colorScaleGenerator: function(values) {
                                return d3.scale.linear()
                                    .domain([d3.min(values), 0, d3.max(values)])
                                    .range(["blue", "white", "red"])
                            }
                        }
                    }
                });
            }
        });
    });
        </script>

        <p><a href="index.html">&laquo; back to examples</a></p>

        <div id="output" style="margin: 10px;"></div>

    </body>

</html>
